<!--
    我的作业
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 我的作业
        div.kecheng
          span.kecheng-span(v-for="(item, index) in collect" @click="isName(item,index)"  :class="index === isIndex?'Greens':''") {{item.title }}
        div
          div.boxSize(v-for="item in Exam" v-if="isIndex == 0")
            div.boxTop
              p.boxExam {{item.examState}}
              div.examDateBox
                span.examDate 完成时间：{{item.examDate}}
                span.examDate {{item.examDateTwo}}前
              p.submit 提交数: {{item.accomplish}}/{{item.all}}
            div.look
              router-link(v-bind:to="{name:'JobDetails'}").lookSize 查看
    div.clearfix
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'MyJob',
    data() {
      return {
        collect: [
          {title: '已完成的作业'},
          {title: '待完成的作业'},
          {title: '已批改的作业'},
          {title: '未批改的作业'}
        ],
        Exam: [
          {
            examState: '未发布的作业',
            examDate: '2019-04-01',
            examDateTwo: '14:00',
            accomplish: 3,
            all: 10
          },
          {
            examState: '已发布的作业',
            examDate: '2019-04-01',
            examDateTwo: '14:00',
            accomplish: 3,
            all: 10
          },
          {
            examState: '已参加的作业',
            examDate: '2019-04-01',
            examDateTwo: '14:00',
            accomplish: 3,
            all: 10
          },
          {
            examState: '待参加的作业',
            examDate: '2019-04-01',
            examDateTwo: '14:00',
            accomplish: 3,
            all: 10
          }
        ],
        isIndex: 0
      }
    },
    methods: {
      isName(item, index) {
        this.isIndex = index
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 5px auto

  h1
    font-size 20px
    color #FF9933
    margin-bottom 36px

  .kecheng
    margin-bottom 16px

  .kecheng-span
    font-size 18px
    margin-right 40px
    color #666
    cursor pointer

  .Greens
    color #0099FF

  .boxSize
    width 300px
    position relative
    display inline-block
    margin-right 30px
    margin-bottom 24px

  .boxTop
    width 300px
    height 160px
    border 1px solid #ccc
    padding-left 24px
    padding-top 26px
    box-sizing border-box
    .boxExam
      font-size 17px
      font-weight 700
      font-family '微软雅黑'
      margin-bottom 16px
    .examDateBox
      margin-bottom 40px
      .examDate
        font-size 13px
        color #999
    .submit
      color #666

  .look
    width 100%
    height 49px
    /*border-top 1px solid #cccccc*/
    border 1px solid #cccccc
    border-top none
    background-color #DBEBDF
    box-sizing border-box
    .lookSize
      width 70px
      height 32px
      line-height 32px
      text-align center
      background-color #FF9933
      border-radius 5px
      position absolute
      left 50%
      bottom 8px
      transform translate(-50%)
      color #fff

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933 !important
    .text
      color #666666
      font-size 18px

</style>
